<template>
  <!-- 排口运维任务统计 -->
  <div class="page-container">
    <div class="control-container">
      <div class="right-panel overflow-x" style="overflow-y: hidden;">
        <div class="search-panel">
          <el-form :inline="true" label-width="100">
            <el-form-item label="开始时间：">
              <el-date-picker
                v-model="query.startTime"
                type="date"
                :clearable="false"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              />
            </el-form-item>
            <el-form-item label="结束时间：">
              <el-date-picker
                v-model="query.endTime"
                value-format="yyyy-MM-dd"
                type="date"
                :clearable="false"
                placeholder="选择日期"
              />
            </el-form-item>
            <el-form-item label="所属项目部" prop="projectDepartmentId">
              <el-select v-model="query.projectDepartmentId" class="w-100" placeholder="请选择所属项目部" clearable filterable>
                <el-option
                  v-for="(item,index) in projectDepartmentIds"
                  :key="index+'projectDepartmentId'"
                  :value="item.id"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="排口" prop="outletName">
              <el-select v-model="query.outletId" class="w-100" placeholder="请选择排口" clearable filterable>
                <el-option
                  v-for="(item,index) in outletIds"
                  :key="index+'outletName'"
                  :value="item.outletId"
                  :label="item.outletName"
                />
              </el-select>
            </el-form-item>
            <el-button type="primary" @click="handleSelect">查询</el-button>
            <el-button type="primary" @click="handleReset">重置</el-button>
            <el-button type="primary" @click="handleExport">导出</el-button>
          </el-form>
        </div>
        <div class="table-panel ">
          <el-table
            v-loading="tableLoading"
            class="grid-data-table"
            height="calc(100vh - 260px)"
            :data="tableData"
            :span-method="objectSpanMethod"
            border
          >
            <el-table-column prop="departmentName" label="项目部" fixed />
            <el-table-column prop="outletName" label="排口" fixed />
            <el-table-column label="运维活动-废水" align="center">
              <el-table-column label="废水主设备">
                <el-table-column prop="e051_01巡检" label="巡检" />
                <el-table-column prop="e051_01参数设置" label="参数设置" />
                <el-table-column prop="e051_01校准" label="校准" />
                <el-table-column prop="e051_01检修" label="检修" />
                <el-table-column prop="e051_01易耗品" label="易耗品" />
                <el-table-column prop="e051_01标样更换" label="标样更换" />
                <el-table-column prop="e051_01比对试验" label="比对试验" />
                <el-table-column prop="e051_01异常数据" label="异常数据" />
                <el-table-column prop="e051_01废液收集" label="废液收集" />
                <el-table-column prop="e051_01校验" label="校验" />
              </el-table-column>
              <el-table-column label="废水次设备" align="center">
                <el-table-column prop="e051_02巡检" label="巡检" />
                <el-table-column prop="e051_02校验" label="校验" />
                <el-table-column prop="e051_02比对试验" label="比对试验" />
                <el-table-column prop="e051_02故障维修" label="故障维修" />
              </el-table-column>
              <el-table-column label="水站设备" align="center">
                <el-table-column prop="e051_03数据核异" label="数据核异" />
                <el-table-column prop="e051_03校准" label="校准" />
                <el-table-column prop="e051_03运行记录" label="运行记录" />
                <el-table-column prop="e051_03试剂更换" label="试剂更换" />
                <el-table-column prop="e051_03故障报告" label="故障报告" />
                <el-table-column prop="e051_03比对试验" label="比对试验" />
                <el-table-column prop="e051_03月考核" label="月考核" />
                <el-table-column prop="e051_03巡检" label="巡检" />
                <el-table-column prop="e051_03检测快报" label="检测快报" />
                <el-table-column prop="e051_03准确度测定" label="准确度测定" />
                <el-table-column prop="e051_03线性检查" label="线性检查" />
                <el-table-column prop="e051_03检出限测定" label="检出限测定" />
              </el-table-column>
            </el-table-column>
            <el-table-column label="运维活动-废气" align="center">
              <el-table-column prop="e051_04量程漂移测定" label="量程漂移测定" />
              <el-table-column prop="e051_04到货验收" label="到货验收" />
              <el-table-column prop="e051_04设备管理" label="设备管理" />
              <el-table-column prop="e051_04维修" label="维修" />
              <el-table-column prop="e051_04易耗品更换" label="易耗品更换" />
              <el-table-column prop="e051_04标气更换" label="标气更换" />
              <el-table-column prop="e051_04异常数据" label="异常数据" />
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { countSatisfactionByMaintenance3 } from '@/api/base/statistics'
import VProjectPersonnel from '@/components/filter/personnelFilter'
import { getList as getDepartmentList } from '@/api/info/projectDepartment'
export default {
  name: 'Maintenance',
  components: {
    VProjectPersonnel
  },
  data() {
    return {
      query: {
        startTime: null,
        endTime: null,
        projectDepartmentId: null,
        outletId: null,
        queryType:'outlet',
        outletName:null
      },
      tableLoading: false,
      tableData: [],
      outletIds:[],
      spanArr: [],
      position: 0,
      projectDepartmentIds: []
    }
  },
  created() {
    this.initData()
    this.rowspan()
    getDepartmentList().then(res => {
      this.projectDepartmentIds = res.data.list
    })
  },
  mounted() {},
  methods: {
    ch(id) { // 拿到v-projectPersonnel组键选择的企业id
      this.query.outletId = id
    },
    initData() {
      this.handleSelect()
      const query = JSON.parse(JSON.stringify(this.query))
      countSatisfactionByMaintenance3(query).then(res => {
        this.outletIds = res.data.list
      })
    },
    // 查询
    handleSelect() {
      this.tableData=[]
      this.spanArr=[]
      this.tableLoading = true
      const query = JSON.parse(JSON.stringify(this.query))
      countSatisfactionByMaintenance3(query).then(res => {
        this.tableData = res.data.list
        this.rowspan()
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    // 重置
    handleReset() {
      this.query = {
        startTime: null,
        endTime: null,
        projectDepartmentId: null,
        outletName:null,
        outletId: null,
      }
    },
    // 导出
    handleExport() {
      this.exportLoading = true
      // this.tableHead
      // this.tableData

      import('@/utils/Export2Excel').then(excel => {

        let arr = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P",
          "Q","R","S","T","U","V","W","X","Y","Z"];
        const multiHeader =
          [
            ['项目部','排口','运维活动-废水','','','','','','','','','','','','','','','','','','','','','','','','','','运维活动-废气','','','','','',''],
            ['','','废水主设备','','','','','','','','','','废水次设备','','','','水站设备','','','','','','','','','','','', '量程漂移测定','到货验收','设备管理','维修','易耗品更换','标气更换','异常数据'],
          ] // 前两行的表头数据，二维数组，不够的用空白补全
        const header = ['','','巡检','参数设置','校准','检修','易耗品','标样更换','比对试管','异常数据','废液收集','校验','巡检','校验','比对试验','故障维修','数据核异','校准','运行记录','试剂更换','故障报告','比对试验','月考核','巡检','检测快报','准确度测定','线性检查','检出限测定','','','','','','',''] // 最后一行的表头数据
        const filterVal= ['departmentName','outletName','e051_01巡检','e051_01参数设置','e051_01校准','e051_01检修','e051_01易耗品','e051_01标样更换','e051_01比对试管','e051_01异常数据','e051_01废液收集','e051_01校验','e051_02巡检','e051_02校验','e051_02比对试验','e051_02故障维修','e051_03数据核异','e051_03校准','e051_03运行记录','e051_03试剂更换','e051_03故障报告','e051_03比对试验','e051_03月考核','e051_03巡检','e051_03检测快报','e051_03准确度测定','e051_03线性检查','e051_03检出限测定','e051_04量程漂移测定','e051_04到货验收','e051_04设备管理','e051_04维修','e051_04易耗品更换','e051_04标气更换','e051_04异常数据']
        // 这里要注意 header  和 filterVal 的数组长度一定要相等，否则会报错
        const list = this.tableData
        const data = this.formatJson(filterVal, list)
        const merges = ['A1:A3','B1:B3','C1:AB1','AC1:AI1','C2:L2','M2:P2','Q2:AB2','AC2:AC3','AD2:AD3','AE2:AE3','AF2:AF3','AG2:AG3','AH2:AH3','AI2:AI3'] // 合并单元格的数据，如何合并参考上面图片讲解
        for (var i = 0; i < list.length; i=j) {
          for(var j = i+1; j < list.length; j++) {
            if(list[i].departmentName!=list[j].departmentName){
              merges.push('A'+(i+4)+':'+'A'+(j+3))
              break
            }else if(j===list.length-1){
              merges.push('A'+(i+4)+':'+'A'+(list.length-1))
            }
          }
        }
        const styleRows = [1,2,3]
        const styleColumns= [1]
        excel.export_json_to_excel({
          multiHeader,
          styleColumns,
          header,
          merges,
          data,
          styleRows,
          filename:"工程师运维统计",
        })
      })
      this.exportLoading = false
    },
    // 拼接数据
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        return v[j]
      }))
    },
    // 表格数据调整
    rowspan() {
      this.tableData.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1)
          this.position = 0
        } else {
          if (this.tableData[index].departmentName === this.tableData[index - 1].departmentName) {
            this.spanArr[this.position] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.position = index
          }
        }
      })
    },
    // 合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex]
        return {
          rowspan: _row,
          colspan: 1
        }
      }
    },
  }
}
</script>

<style lang='scss' scoped>
</style>
